<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <style>
        body {
            text-align: center
        }

        #divcss5 {
            margin: 0 auto;
            border: 1px solid #000;
            width: 900px;
            height: 500px
        }

        #nav {
            width: 730px;
            height: 50px;
            background-color: #DFD4B5;
            margin: auto;
        }

        /*子类选择器 > */
        #nav > ul {
            font-weight: bold;
            font-size: small;
            line-height: 50px;
            margin: auto;
        }

        #nav > ul > li {
            list-style-type: none;
            float: left;
        }

        #nav span {
            padding-left: 10px;
            padding-right: 10px;
        }

        li:hover {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        li:active {
            color: red;
        }
    </style>
</head>
<body>
<div id="nav">
    <ul>
        <li><a href="{{ url_for('nav') }}">首页<span>|</span></li>
        <li><a href="{{ url_for('zxt') }}">折线图<span>|</span></li>
        <li><a href="{{ url_for('bing') }}">饼状图<span>|</span></li>
        <li><a href="{{ url_for('three_d') }}">3D图<span>|</span></li>
        <li><a href="{{ url_for('rose') }}">玫瑰图<span>|</span></li>
        <li><a href="{{ url_for('ldt') }}">漏斗图<span>|</span></li>
        <li><a href="{{ url_for('zzt') }}">柱状图<span>|</span></li>
        <li><a href="{{ url_for('wordcloud') }}">词云图<span>|</span></li>
        <li><a href="{{ url_for('sdt') }}">散点图</li>
    </ul>
</div>
<div id="divcss5">
    <div id="7a263303e38e4a558dbcc126586f308e" class="chart-container" style="width:900px; height:500px;"></div>
</div>
<script>
    var chart_7a263303e38e4a558dbcc126586f308e = echarts.init(
        document.getElementById('7a263303e38e4a558dbcc126586f308e'), 'dark', {renderer: 'canvas'});
    var option_7a263303e38e4a558dbcc126586f308e = {
        "animation": true,
        "animationThreshold": 2000,
        "animationDuration": 1000,
        "animationEasing": "cubicOut",
        "animationDelay": 0,
        "animationDurationUpdate": 300,
        "animationEasingUpdate": "cubicOut",
        "animationDelayUpdate": 0,
        "series": [
            {
                "type": "line",
                "name": "\u5f39\u5e55\u6570\u91cf",
                "connectNulls": false,
                "symbolSize": 4,
                "showSymbol": true,
                "smooth": false,
                "step": false,
                "data": [
                    [
                        "\u7b2c1\u96c6",
                        7320
                    ],
                    [
                        "\u7b2c2\u96c6",
                        6972
                    ],
                    [
                        "\u7b2c3\u96c6",
                        5580
                    ],
                    [
                        "\u7b2c4\u96c6",
                        6324
                    ],
                    [
                        "\u7b2c5\u96c6",
                        8844
                    ],
                    [
                        "\u7b2c6\u96c6",
                        7200
                    ],
                    [
                        "\u7b2c7\u96c6",
                        7080
                    ],
                    [
                        "\u7b2c8\u96c6",
                        6408
                    ],
                    [
                        "\u7b2c9\u96c6",
                        7536
                    ],
                    [
                        "\u7b2c10\u96c6",
                        8328
                    ],
                    [
                        "\u7b2c11\u96c6",
                        5844
                    ],
                    [
                        "\u7b2c12\u96c6",
                        6396
                    ]
                ],
                "hoverAnimation": true,
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                },
                "lineStyle": {
                    "show": true,
                    "width": 1,
                    "opacity": 1,
                    "curveness": 0,
                    "type": "solid"
                },
                "areaStyle": {
                    "opacity": 0
                },
                "zlevel": 0,
                "z": 0
            }
        ],
        "legend": [
            {
                "data": [
                    "\u5f39\u5e55\u6570\u91cf"
                ],
                "selected": {
                    "\u5f39\u5e55\u6570\u91cf": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }
        ],
        "tooltip": {
            "show": true,
            "trigger": "item",
            "triggerOn": "mousemove|click",
            "axisPointer": {
                "type": "line"
            },
            "textStyle": {
                "fontSize": 14
            },
            "borderWidth": 0
        },
        "xAxis": [
            {
                "name": "\u96c6\u6570",
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                },
                "data": [
                    "\u7b2c1\u96c6",
                    "\u7b2c2\u96c6",
                    "\u7b2c3\u96c6",
                    "\u7b2c4\u96c6",
                    "\u7b2c5\u96c6",
                    "\u7b2c6\u96c6",
                    "\u7b2c7\u96c6",
                    "\u7b2c8\u96c6",
                    "\u7b2c9\u96c6",
                    "\u7b2c10\u96c6",
                    "\u7b2c11\u96c6",
                    "\u7b2c12\u96c6"
                ]
            }
        ],
        "yAxis": [
            {
                "name": "\u5f39\u5e55\u6570\u91cf(\u5355\u4f4d/\u6761)",
                "show": true,
                "scale": false,
                "nameLocation": "end",
                "nameGap": 15,
                "gridIndex": 0,
                "inverse": false,
                "offset": 0,
                "splitNumber": 5,
                "minInterval": 0,
                "splitLine": {
                    "show": false,
                    "lineStyle": {
                        "show": true,
                        "width": 1,
                        "opacity": 1,
                        "curveness": 0,
                        "type": "solid"
                    }
                }
            }
        ],
        "title": [
            {
                "text": "\u6bcf\u96c6\u5f39\u5e55\u6570\u7684\u6298\u7ebf\u56fe",
                "padding": 5,
                "itemGap": 10
            }
        ],
        "toolbox": {
            "show": true,
            "orient": "horizontal",
            "itemSize": 15,
            "itemGap": 10,
            "left": "80%",
            "feature": {
                "saveAsImage": {
                    "type": "png",
                    "backgroundColor": "auto",
                    "connectedBackgroundColor": "#fff",
                    "show": true,
                    "title": "\u4fdd\u5b58\u4e3a\u56fe\u7247",
                    "pixelRatio": 1
                },
                "restore": {
                    "show": true,
                    "title": "\u8fd8\u539f"
                },
                "dataView": {
                    "show": true,
                    "title": "\u6570\u636e\u89c6\u56fe",
                    "readOnly": false,
                    "lang": [
                        "\u6570\u636e\u89c6\u56fe",
                        "\u5173\u95ed",
                        "\u5237\u65b0"
                    ],
                    "backgroundColor": "#fff",
                    "textareaColor": "#fff",
                    "textareaBorderColor": "#333",
                    "textColor": "#000",
                    "buttonColor": "#c23531",
                    "buttonTextColor": "#fff"
                },
                "dataZoom": {
                    "show": true,
                    "title": {
                        "zoom": "\u533a\u57df\u7f29\u653e",
                        "back": "\u533a\u57df\u7f29\u653e\u8fd8\u539f"
                    },
                    "icon": {}
                },
                "magicType": {
                    "show": true,
                    "type": [
                        "line",
                        "bar",
                        "stack",
                        "tiled"
                    ],
                    "title": {
                        "line": "\u5207\u6362\u4e3a\u6298\u7ebf\u56fe",
                        "bar": "\u5207\u6362\u4e3a\u67f1\u72b6\u56fe",
                        "stack": "\u5207\u6362\u4e3a\u5806\u53e0",
                        "tiled": "\u5207\u6362\u4e3a\u5e73\u94fa"
                    },
                    "icon": {}
                },
                "brush": {
                    "icon": {},
                    "title": {
                        "rect": "\u77e9\u5f62\u9009\u62e9",
                        "polygon": "\u5708\u9009",
                        "lineX": "\u6a2a\u5411\u9009\u62e9",
                        "lineY": "\u7eb5\u5411\u9009\u62e9",
                        "keep": "\u4fdd\u6301\u9009\u62e9",
                        "clear": "\u6e05\u9664\u9009\u62e9"
                    }
                }
            }
        },
        "visualMap": {
            "show": true,
            "type": "continuous",
            "min": 5500,
            "max": 8900,
            "inRange": {
                "color": [
                    "#50a3ba",
                    "#eac763",
                    "#d94e5d"
                ]
            },
            "calculable": true,
            "inverse": false,
            "splitNumber": 5,
            "orient": "vertical",
            "showLabel": true,
            "itemWidth": 20,
            "itemHeight": 140,
            "borderWidth": 0
        },
        "axisPointer": {
            "show": true,
            "type": "line"
        }
    };
    chart_7a263303e38e4a558dbcc126586f308e.setOption(option_7a263303e38e4a558dbcc126586f308e);
</script>
</body>
</html>
